<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./elementui/vue.min.js"></script>
    <link rel="stylesheet" href="./elementui/index.css">
    <script src="./elementui/index.js"></script>
<!--    <script src="./node_modules/downloadjs/download.min.js"></script>-->

</head>
<body>
<div id="app">

    <div class="index">
        <el-container>
            <el-table
                    :data="tableData"
                    id="taskTable"
                    style="width: 100%">
                <el-table-column
                        prop="date"
                        label="日期"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="地址">
                </el-table-column>
            </el-table>
        </el-container>


        <download-excel :data='tableData' :fields='json_fields' name='导出文件.xlsx'>
            <el-button type='primary'>导出2</el-button>
        </download-excel>

        <el-button @click="me" type='primary'>按钮</el-button>

    </div>


</div>

<script type="module">
    // import  json from "vue-json-excel"
    import JsonExcel from './node_modules/vue-json-excel/dist/vue-json-excel.esm.js'
    Vue.component('download-excel', JsonExcel);

    new Vue({
        el: "#app",
        data() {
            return {
                excelpage: [],
                json_fields: {
                    "日期1": "date",
                    "名字": "name",
                    "地址": "address",

                },
                tableData:[]

                  /*  [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]*/
            }
        },
        methods: {
            me() {
                console.log(JsonExcel)
            }
        }
    })
</script>
</body>
</html>
